<template>
  <div>
    <CategorySelector :disabled="isShow !== CompNames.SPU_LIST" />
    <SpuList
      v-if="isShow === CompNames.SPU_LIST"
      @setIsShow="setIsShow"
      @setCurrentSpu="setCurrentSpu"
    />
    <AddOrUpdateSpu
      v-else-if="isShow === CompNames.ADD_SPU"
      @setIsShow="setIsShow"
      :currentSpu="currentSpu"
    />
    <AddOrUpdateSku
      @setIsShow="setIsShow"
      :spu="{ id: currentSpu.id as number, spuName: currentSpu.spuName }"
      v-else
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Spu',
  });
</script>

<script lang="ts" setup>
  import { ref } from 'vue';
  import CategorySelector from '../category-selector/index.vue';
  import SpuList from './components/SpuList.vue';
  import AddOrUpdateSpu from './components/AddOrUpdateSpu.vue';
  import AddOrUpdateSku from './components/AddOrUpdateSku.vue';
  import { SpuModel } from '/@/api/product/model/spuModel';
  import { CompNames } from './types';

  const isShow = ref<CompNames>(CompNames.SPU_LIST);
  const currentSpu = ref<SpuModel>({
    spuName: '',
    description: '',
    tmId: undefined,
    spuSaleAttrList: [],
    spuImageList: [],
  });

  const setIsShow = (val: CompNames) => {
    isShow.value = val;
  };

  const setCurrentSpu = (
    val: SpuModel = {
      spuName: '',
      description: '',
      tmId: undefined,
      spuSaleAttrList: [],
      spuImageList: [],
    },
  ) => {
    currentSpu.value = val;
  };
</script>
